<template>
  <div class="home">
    <div class="header">
      <div class="top">
        <!-- logo -->
        <a class="logo"><img src="./assets/xtjj.svg" alt=""></a>
        <!-- 导航栏 -->
        <div class="header-in">
          <!-- 左侧 -->
          <div class="header-l">
            <RouterLink to="/">首页</RouterLink>
            <RouterLink to="/Bots">BOT</RouterLink>
            <a href="#">沸点</a>
            <a href="#">课程</a>
            <a href="#">直播</a>
            <a href="#">活动</a>
            <a href="#">竞赛</a>
            <a href="#">商城</a>
            <a href="#">APP</a>
            <a href="#">插件</a>
            <!-- <img src="./assets/AGIlogo.image" alt=""> -->
          </div>
          <!-- 右侧 -->
          <div class="header-r">
            <div class="header-sou">
              <input type="text" placeholder="探索稀土掘金">
              <button>搜</button>
            </div>
            <div class="header-centre">
              <button>创作者中心</button>
              <div>#</div>
            </div>
            <a href="#"><img src="./assets/vip.png" alt=""><span>会员</span></a>
            <div class="header-dz"><a href="#">登录</a><span>|</span><a href="#">注册</a></div>
          </div>
        </div>
      </div>
    </div>
<div class="main">
  <RouterView />
</div>
  </div>



</template>

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'

//控制导航栏在滚动距离达到400时隐藏
window.onload = function () {
  const header = document.querySelector('.header');
  // const main = document.querySelector('.main');

  const scrollThreshold = 400;
  // 检查header是否为null
  if (header) {
    window.addEventListener('scroll', () => {
      if (window.scrollY > scrollThreshold) {
        header.classList.add('scrolled');
      } else if (window.scrollY === 0) {
        header.classList.remove('scrolled');
      }
    });
  } else {
    console.error('没有找到具有 .header 类的元素');
  }
   // 检查main是否为null
  //  if (main) {
  //   window.addEventListener('scroll', () => {
  //     if (window.scrollY > scrollThreshold) {
  //       main.classList.add('scrolled_80');
  //     } else if (window.scrollY === 0) {
  //       main.classList.remove('scrolled_80');
  //     }
  //   });
  // } else {
  //   console.error('没有找到具有 .main 类的元素');
  // }

}


</script>

<style scoped lang="scss">
//主色调一
$dominant_tone1: #ffffff;
//主色调二
$dominant_tone2: #f2f3f5;


.home {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  gap: 20px 0;
  background-color: $dominant_tone2;

  .header {
    flex: 0 1 auto;
    width: 100%;
    height: 60px;
    background-color: $dominant_tone1;
    position: fixed;
    top: 0;

    .top {
      width: 1440px;
      height: 60px;
      display: flex;
      justify-content: center;
      margin: auto;
      background-color: $dominant_tone1;

      .logo {
        padding: 19px 0;
        margin: 0 12px 0 24px;
        flex-grow: 0;

        img {
          width: 107px;
          height: 22px;
        }
      }

      .header-in {
        display: flex;
        justify-content: space-between;
        flex-grow: 1;

        .header-l {
          display: flex;

          a {
            width: 52px;
            font-size: 14px;
            color: gray;
            /* line-height: 52px;
                        text-align: center; */
            display: flex;
            /*使用flex布局让文字不是对齐基线*/
            justify-content: center;
            align-items: center;
          }
        }

        .header-r {
          display: flex;
          align-items: center;
          gap: 0 24px;

          .header-sou {
            width: 260px;
            height: 34px;
            box-sizing: border-box;
            border: 0.5px solid #b2b2b2;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-radius: 4px;
            flex-grow: 1;

            input {
              border: none;
              flex-grow: 1;
              padding: 7.2px 0 7.2px 12px;
            }

            button {
              width: 44px;
              height: 30px;
              border: none;
            }
          }

          .header-centre {
            display: flex;
            width: 115px;
            height: 36px;
            flex-grow: 0;

            button {
              width: 94px;
              height: 36px;
              border: none;
              background-color: #1e80ff;
              color: white;
              border-top-left-radius: 4px;
              border-end-start-radius: 4px;
            }

            div {
              width: 20px;
              display: flex;
              color: white;
              border-left: 0.5px solid #ffffff36;
              align-items: center;
              background-color: #1e80ff;
              border-top-right-radius: 4px;
              border-end-end-radius: 4px;
            }
          }

          a {
            display: flex;
            align-items: center;

            span {
              font-size: 14px;
              color: gray;
            }

            img {
              width: 24px;
              height: 24px;
              margin-right: 3px;
            }
          }

          .header-dz {
            height: 36px;
            padding: 3.6px 12px;
            border: 1px solid #0080ff57;
            background-color: #1e80ff0d;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            margin-right: 24px;
            gap: 0 5px;
            border-radius: 4px;
            flex-grow: 0;

            a {
              color: #007fff;
              font-size: 14px;
            }

            span {
              color: #0080ff57;
              font-size: 12px;
            }
          }
        }
      }
    }
  }

  .header.scrolled {
    display: none;
  }

  .main{
    margin-top: 80px;
  }
  // .main.scrolled_80 {
  //   margin-top: -80px;
  // }
}
</style>
